<!-- 基础：1、介绍 用组件构建（应用） -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：1、介绍 用组件构建（应用）</title>                       
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 没有实例化组件无法生效 -->
	<ol>
		<todo-item></todo-item>
	</ol>

	<!-- 实例化组件生效 -->
	<ol id="app-1">
		<todo-item></todo-item>
		<todo-item></todo-item>
		<todo-item></todo-item>
	</ol>

    <!-- 通过v-for指令进行数据的遍历，通过v-bind将每次遍历的元素传递给全局组件的todo属性 -->
	<ul id="app-2">
		<todo-item2 v-for="item in groceryList" v-bind:todo="item"></todo-item2>
	</ul>

	<script type="text/javascript">
		// 以Vue.开头的都是全局的API，所谓全局，简单地说就是对所有的vue实例都适用
		// 相对而言，比如v-on对DOM事件的监听触发的方法是局部的
		 
		// Vue.component用来注册或获取全局组件，下面是注册的用法
		// 适用形式为Vue.component(id,[definition])
		// @param   id    组件的id，在使用上类似于xml，比如这里定义了id为todo-item，那么这个组件插在html代码中的使用形式为<todo-item></todo-item>
		// @param   Vue.extend({ /* ... */ })     第二个参数实际上是传入一个对象(扩展过的构造器)Vue.extend({ /* ... */ })，如果只使用{ /* ... */}
		//                                        传选项对象会自动调用Vue.extend
		// 选项对象里面的template属性，实例上就是DOM模板的意思，它会在经过编译后替换<todo-item></todo-item>为<li>This is a todo</li>
		// 注意注册好的组件不能直接使用，否则无法生效，必须进行实例化
		Vue.component('todo-item', {
			// template不仅可以是直接的html代码，还可以是一个DOM选择器，用选中的DOM来做它的模板
			// eg: <html>... <li id="todo-template">This is a todo</li>  ...</html>
			//     template: '#todo-template'
		  	template: '<li>This is a todo</li>'
		})

		var app1 = new Vue({
			el: '#app-1',			
		})


		// 注册一个组件，组件的注册一定要在实例化vue之前
		Vue.component('todo-item2', {
			// 使用props字段来将#app-2 vue实例中的数据传递给子组件，定义了组件的todo属性为父组件传递给子组件的数据
			props: ['todo'],          
			template: '<li>{{ todo.text }}</li>'
		})

		// 现在假设请求一个数据接口，返回的是一个对象数组，要把这个数组数据用组件渲染出来
		// 很自然，我们会想到前面的v-for指令来实现
		var app2 = new Vue({
			el: '#app-2',
			data: {
				// 假设groceryList是请求数据接口拿到的数据
				groceryList: [
					{ text: 'Vegetables' },
					{ text: 'Cheese' },
					{ text: 'Whatever else humans are supposed to eat' }
				]
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->